<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <%@ include file="/WEB-INF/views/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
  <script type="text/javascript">
	var datagrid;
	var rowEditor=undefined;
	$(function(){
		datagrid=$("#dg").datagrid({
			url:"${cs}/cs/user/list",//加载的URL
		    isField:"id",
			pagination:true,//显示分页
			pageSize:10,//分页大小
			pageList:[10,15,20],//每页的个数
			fit:true,//自动补全
			fitColumns:true,
			iconCls:"icon-save",//图标
			columns:[[      //每个列具体内容
		              {field:'id', hidden:true },   
		              {field:'username', title:'用户名',  width:"10%", align:'center' },
		              {field:'age',title:'姓名',width:"10%", align:'center',
			             	 formatter:function(value,rowData,rowIndex) { 
			             	 	return rowData.userinf.nick;
			             	 }
			              },
		              {field:'idcard',title:'身份证',width:"20%", align:'center'},
		              {field:'email',title:'邮箱',width:"15%", align:'center'},
		              {field:'phone',title:'手机',width:"15%", align:'center'},
		              {field:'roleName',title:'角色名',width:"10%", align:'center'},
		              {field:'age',title:'年龄',width:"10%", align:'center',
		             	 formatter:function(value,rowData,rowIndex) { 
		             	 	return rowData.userinf.age+"岁";
		             	 }
		              },
		              {field:'sex',title:'性别',width:"10%", align:'center',
			             	 formatter:function(value,rowData,rowIndex) { 
			             	 	return rowData.userinf.sex;
			             	 }
			              },
		              {field:'address',title:'籍贯',width:"20%", align:'center',
			             	 formatter:function(value,rowData,rowIndex) { 
			             	 	return rowData.userinf.dddress;
			             	 }
			              },
		              {field:'desc',title:'备注',width:"20%", align:'center',
			             	 formatter:function(value,rowData,rowIndex) { 
			             	 	return rowData.userinf.desc;
			             	 }
			              }
		          ]],
			toolbar:[              //工具条
			        {text:"新增用户",iconCls:"icon-add",handler:function(){//回调函数
			        	 $('#dd').dialog('open').window('resize',{width:'300px',top:'87px',left:'399px'});
			        }},
			        {text:"资料维护",iconCls:"icon-edit",handler:function(){
			        	var rows=datagrid.datagrid('getSelections');
			        	if(rows.length==1)
			        	{
			        		$("#infEdit").dialog("open");
			        		$("#id").val(rows[0].id);
			        		$("#idcard").textbox("setValue",rows[0].idcard);
			        		$("#email").textbox("setValue",rows[0].email);
			        		$("#phone").numberbox("setValue",rows[0].phone);
			        		$("#age").numberbox("setValue",rows[0].userinf.age);
			        		$("#sex").combobox("setValue",rows[0].userinf.sex);
			        		$("#address").textbox("setValue",rows[0].userinf.dddress);
			        		$("#desc").textbox("setValue",rows[0].userinf.desc);
			        		$("#nick").textbox("setValue",rows[0].userinf.nick);
			        	} else {
			        		$.messager.alert('错误', "只能选择一个数据进行修改", 'error');
			        	}
			        }},
			        {text:"重置密码",iconCls:"icon-redo",handler:function(){//回调函数
			        	var rows=datagrid.datagrid('getSelections');
			        	if(rows.length==1){
				        	$.messager.confirm('确定','你确定要重置该用户的密码吗?（重置后密码为此用户身份证后六位）',function(r){
				        	    if (r){
				        			$.post("${cs}/cs/user/resetPass?id="+rows[0].id,function(r){
				        				$.messager.show({
				        					title:r.state==1?"Success":"Error",
				        					msg:r.msg
				        				})
				        			},"json");
				        	    }
				        	});
			        	} else {
			        		$.messager.alert('错误', "只能选择一个数据进行操作", 'error');
			        	}
			        }},
			        {text:"重新分配角色",iconCls:"icon-filter",handler:function(){//回调函数
			        	var rows=datagrid.datagrid('getSelections');
			        	if(rows.length==1){
				        	 $('#reRole').dialog('open');
				        	 $("#userid").val(rows[0].id);
				        	 $('#role').combobox({
				    			 url: "${cs}/cs/user/role/combobox",
				    			 valueField:'id',
				    			 textField:'name',
				    	   		 onLoadSuccess: function(data){
				    	            if(data.length<=0) {
				    	            	 $("#roleid").combobox('loadData',[{"siteName": '请选择', "id": '-1'}]);
				    	             }
				    	          $("#role").combobox('select',rows[0].roleId);	
				    	         }
				    		 });
				        }else {
			        		$.messager.alert('错误', "只能选择一个数据进行操作", 'error');
			        	}	
			        }
			      }  
			  ]
		});
		$('#reRole').dialog({
            title: "角色修改",
            closed:true,
            modal: true, //dialog继承自window，而window里面有modal属性，所以dialog也可以使用
            toolbar: [{
					text:'Ok',
				iconCls:'icon-ok',
				handler:function(){
					$('#ff2').form('submit',{
						onSubmit:function(){
							var isValid = $(this).form('validate');
							return isValid;
						},
						success: function(r){
							if(r>0){
								$.messager.show({
									title:"Success！",
									msg:"恭喜您，操作成功！"
								})
								$('#reRole').dialog('close');
							}else{
								$.messager.alert('错误',"数据出错！", 'error');
							}
						}
					},"json");
				
				}
			},{
				text:'Cancel',
				iconCls:'icon-Cancel',
				handler:function(){
					$('#reRole').dialog('close');
					$('#ff2').form('clear');
				}
			}],
			onClose: function() {
				$('#ff2').form('clear');
				datagrid.datagrid('unselectAll');
				datagrid.datagrid('reload');
			}
        });
		$('#infEdit').dialog({
            title: "角色信息修改",
            closed:true,
            modal: true, //dialog继承自window，而window里面有modal属性，所以dialog也可以使用
            toolbar: [{
					text:'Ok',
				iconCls:'icon-ok',
				handler:function(){
					$('#ff3').form('submit',{
						onSubmit:function(){
							var isValid = $(this).form('validate');
							return isValid;
						},
						success: function(r){
							if(r>0){
								$.messager.show({
									title:"Success！",
									msg:"恭喜您，操作成功！"
								})
								$('#infEdit').dialog('close');
							}else{
								$.messager.alert('错误',"数据出错！", 'error');
							}
						}
					},"json");
				
				}
			},{
				text:'Cancel',
				iconCls:'icon-Cancel',
				handler:function(){
					$('#infEdit').dialog('close');
					$('#ff3').form('clear');
				}
			}],
			onClose: function() {
				$('#ff2').form('clear');
				datagrid.datagrid('unselectAll');
				datagrid.datagrid('reload');
			}
        });
		 $('#dd').dialog({
             title: "新增用户",
             closed:true,
             modal: true, //dialog继承自window，而window里面有modal属性，所以dialog也可以使用
             toolbar: [{
					text:'Ok',
				iconCls:'icon-ok',
				handler:function(){
					$('#ff').form('submit',{
						onSubmit:function(){
							var isValid = $(this).form('validate');
							return isValid;
						},
						success: function(){
							$.messager.show({
								title:"Success！",
								msg:"恭喜您，操作成功！"
							})
							$('#ff').form('clear');
						}
					},"json");
				
				}
			},{
				text:'Cancel',
				handler:function(){
					$('#dd').dialog('close');
				}
			}],
			onClose: function() {
				$('#ff').form('clear');
				datagrid.datagrid('reload');
			}
         });
		 
		 initCombox();
	    
		$("#btn_search").click(function(){
			var param = $("#searchForm").serializeJson();
			datagrid.datagrid('load', param);

			});
		});
	
	function initCombox() {
		$('#sex').combobox({
			 valueField:'id',
			 textField:'name',
			 data:[{"id":"男","name":"男"},{"id":"女","name":"女"}]
			 }),
		 $('#roleid').combobox({
			 url: "${cs}/cs/user/role/combobox",
			 valueField:'id',
			 textField:'name',
			 loadFilter : function (r){
				 var data=[{"name": '全选', "id": '0'}];
				 for(var i=0;i<r.length;i++){
					 data.push({"name":r[i].name,"id":r[i].id});
				 }
				 return data;
			 },
	   		 onLoadSuccess: function(data){
	            if(data.length<=0) {
	            	 $("#roleid").combobox('loadData',[{"siteName": '请选择', "id": '-1'}]);
	             }
	            $("#roleid").combobox('select',data[0].id);	
	         }
		 });
	}
     var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}   
     function isCardID(sId){   
         var iSum=0 ;  
         var info="" ;  
         if(!/^\d{17}(\d|x)$/i.test(sId)) return "你输入的身份证长度或格式错误";   
         sId=sId.replace(/x$/i,"a");   
         if(aCity[parseInt(sId.substr(0,2))]==null) return "你的身份证地区非法";   
         sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));   
         var d=new Date(sBirthday.replace(/-/g,"/")) ;  
         if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "身份证上的出生日期非法";   
         for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11) ;  
         if(iSum%11!=1) return "你输入的身份证号非法";   
         return true;//aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女")   
     }
     $.extend($.fn.validatebox.defaults.rules, {     
     	    idcared: {     
     	        validator: function(value,param){    
     	            var flag= isCardID(value);  
     	            return flag==true?true:false;    
     	        },     
     	        message: '不是有效的身份证号码'    
     	    },
	     username: {     
		        validator: function(value,param){    
		        	var flag=false;
		        	$.ajax({
		        		type:"post",
		        		url:"${cs}/exitsUsername",
		        		data:"username="+value,
		        		dataType:"json",
		        		async : false,
		        		success:function(result){
    	    				flag=result;
    	    			}
		        	})
		        	return flag==true?true:false; 
		        },     
		        message: '账户信息已存在！'    
		    },
		    phone:{     
		        validator: function(value,param){
		        	var flag=/^1[3|4|5|8][0-9]\d{4,8}$/.test(value);
		        	return flag==true?true:false; 
		        },     
		        message: '手机号不合法!'    
		    },
		    equalTo: { validator: function (value, param) { return $(param[0]).val() == value; }, message: '两次输入密码不一致！' }
     	}); 
    </script>
</head>
<body style="padding:0 4px; margin:0;  overflow: hidden; ">
<div class="easyui-layout" style="width:100%;height:100%;" data-options="fit:true">
		<div title="用户管理" data-options="region:'north'" style="height:70px">
		 <form id="searchForm" >
			<table cellpadding="5">
				    		<tr>
				    			<td>姓名:</td>
				    			<td><input class="easyui-textbox" type="text" id="username"  name="userinf.nick" ></input></td>
				    			<td>角色:</td>
				    			<td><input class="easyui-combobox" type="text" data-options="panelHeight:'auto'" id="roleid"  name="roleId" ></input></td>
				    			<td ><a href="#" id="btn_search" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px">Search</a></td>
				    		</tr>
				    		<tr>
				    		</tr>
				    	</table>
				  </form>
		</div>
				<div data-options="region:'center'" >
					<table id="dg" >
					</table>
				</div>

			
				<div id="dd" title="新增用户"  style="width:300px;height:420px; text-align: center; " data-options="closed:true">
				    <form id="ff" method="post" action="${cs}/cs/user/saveUser" >
				    		<input type="hidden" id="id" name="id">
				    	<table cellpadding="5"  style="text-align: left;">
				    		<tr>
				    			<td>用户名:</td>
				    			<td><input class="easyui-textbox" type="text" id="username"  name="username"  data-options="required:true,validType:['length[6,15]','username']"  missingMessage="用户名不能为空"></input></td>
				    		</tr>
				    		<tr>
				    			<td>密码:</td>
				    			<td><input class="easyui-textbox" type="password" id="password"  name="password" validType="length[6,20]" data-options="required:true" missingMessage="密码不能为空"></input></td>
				    		</tr>
				    		<tr>
				    			<td>再次输入密码:</td>
				    			<td><input class="easyui-textbox" type="password" id="rpassword"  name="rpassword" data-options="required:true" validType="equalTo['#password']"  missingMessage="请再次输入密码"></input></td>
				    		</tr>
				    		<tr>
				    			<td>身份证:</td>
				    			<td><input class="easyui-textbox" type="text"   name="idcard" data-options="required:true,validType:'idcared'"  missingMessage="身份证不能为空"></input></td>
				    		</tr>
				    		<tr>
				    			<td>邮箱:</td>
				    			<td><input class="easyui-textbox" type="text"   name="email" data-options="required:true" validType="email" missingMessage="邮箱不能为空"></input></td>
				    		</tr>
				    		<tr>
				    			<td>手机:</td>
				    			<td><input class="easyui-numberbox" type="text"   name="phone" data-options="required:true,validType:['length[11,11]','phone']"  missingMessage="手机号不能为空！"></input></td>
				    		</tr>
				    		<tr>
				    			<td colspan="2" align="center">
				    			基本资料(选填)<hr>
				    			</td>
				    		</tr>
				    		<tr>
				    			<td>姓名:</td>
				    			<td><input class="easyui-textbox" type="text"   name="userinf.nick"   ></input></td>
				    		</tr>
				    		<tr>
				    			<td>性别:</td>
				    			<td>
				    				<input class="easyui-combobox" type="text" data-options="value:'男',panelHeight:'auto'" id="sex"  name="userinf.sex"   >
				    			</td>
				    		</tr>
				    		<tr>
				    			<td>年龄:</td>
				    			<td><input class="easyui-numberbox" type="text"   name="userinf.age"   ></input></td>
				    		</tr>
				    		<tr>
				    			<td>籍贯:</td>
				    			<td><input class="easyui-textbox" type="text"   name="userinf.dddress"   ></input></td>
				    		</tr>
				    		<tr>
				    			<td>简介:</td>
				    			<td><input class="easyui-textbox" type="text" data-options="multiline:true" style="width:171px;height:60px;"  name="userinf.desc"  ></input></td>
				    		</tr>
				    	</table>
				    </form>
			   </div>
			   <div id="reRole" title="重新分配角色"  style="width:300px;height:400px; text-align: center; " data-options="closed:true">
			   		<form id="ff2" method="post" action="${cs}/cs/user/saveUser">
			   			<input type="hidden" id="userid" name="id">
			   			新角色：
			   			<hr/>
			   			<input class="easyui-combobox" type="text" data-options="panelHeight:'auto'" id="role"  name="roleId" ></input></td>
			   		</form>
			   </div>
			   <div id="infEdit" title="资料修改"  style="width:300px;height:420px; text-align: center; " data-options="closed:true">
			   		<form id="ff3" method="post" action="${cs}/cs/user/saveUser">
			   			<input type="hidden" id="id" name="id">
			   			安全资料：
			   			<hr/>
		   				<table>
			   				<tr>
				    			<td>身份证:</td>
				    			<td><input class="easyui-textbox" type="text" id="idcard"  name="idcard" data-options="required:true,validType:'idcared'"  missingMessage="身份证不能为空"></input></td>
				    		</tr>
				    		<tr>
				    			<td>邮箱:</td>
				    			<td><input class="easyui-textbox" type="text" id="email"  name="email" data-options="required:true" validType="email" missingMessage="邮箱不能为空"></input></td>
				    		</tr>
				    		<tr>
				    			<td>手机:</td>
				    			<td><input class="easyui-numberbox" type="text" id="phone"  name="phone" data-options="required:true" validType="phone" missingMessage="邮箱不能为空"></input></td>
				    		</tr>
				    		<tr>
				    			<td colspan="2" align="center">
				    			基本资料(选填)<hr>
				    			</td>
				    		</tr>
				    		<tr>
				    			<td>姓名:</td>
				    			<td><input class="easyui-textbox" type="text" id="nick"  name="userinf.nick"   ></input></td>
				    		</tr>
				    		<tr>
				    			<td>性别:</td>
				    			<td>
				    				<input class="easyui-combobox" type="text" data-options="value:'男',panelHeight:'auto'" id="sex"  name="userinf.sex"   >
				    			</td>
				    		</tr>
				    		<tr>
				    			<td>年龄:</td>
				    			<td><input class="easyui-numberbox" type="text" id="age"  name="userinf.age"   ></input></td>
				    		</tr>
				    		<tr>
				    			<td>籍贯:</td>
				    			<td><input class="easyui-textbox" type="text" id="address"  name="userinf.dddress"   ></input></td>
				    		</tr>
				    		<tr>
				    			<td>简介:</td>
				    			<td><input class="easyui-textbox" type="text" data-options="multiline:true" style="width:171px;height:60px;" id="desc"  name="userinf.desc"  ></input></td>
				    		</tr>
			    		</table>
			   		</form>
			   </div>
		</div>
</body>
</html>